<template>
    <div>
        <ul class="mui-table-view">
            <li v-for="itme in newsList" :key="itme.id" class="mui-table-view-cell mui-media">
                <router-link :to="'/home/newsList/newsInfo/'+itme.id">
                    <img class="mui-media-object mui-pull-left" :src="itme.img_url">
                    <div class="mui-media-body">
                        <h4>{{itme.title}}</h4> 
                        <p class="mui-ellipsis">
                            <span>{{ itme.add_time | dateFormat }}</span>
                            <span>{{itme.click}}</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<style lang="scss" scoped>
.mui-table-view-cell{
    h4{
        font-size: 14px;
    }
    .mui-ellipsis{
        font-size: 10px;
        color:blue;
        display: flex;
        justify-content: space-between;
    }
}
</style>
<script>
import { Toast } from 'mint-ui'
export default {
    data() {
        return {
            newsList:[],
        }
    },
    created() {
        this.getNewsList();
    },
    methods: {
        getNewsList(){//用于获取本地数据
            this.$http.get("news.json").then(result=>{
                if (result.body) {
                     this.newsList=result.body;
                } else {
                    Toast("获取数据失败！！！");
                }
               
            })
        }
    },
}
</script>